<template>
  <div  class="r-item-content scale-1px" @click="detailbook">
    <img class="item-img" :src="data.pic_url" />
    <div class="brand brand-pin" v-if="data.brand_type">品牌</div>
    <div class="brand brand-xin" v-else>新到</div>'
    <div class="item-info-content">
      <p class="item-title">{{data.name}}</p>
      <div class="item-desc clearfix">
        <div class="item-score"><StarScore :score="data.wm_poi_score" /></div>
        <div class="item-count">月售{{data.month_sale_num>999?'999+':data.month_sale_num}}</div>
        <div class="item-distance">&nbsp;{{data.distance}}</div>
        <div class="item-time">{{data.mt_delivery_time}}&nbsp;|</div>
      </div>
      <div class="item-price">
        <div class="item-pre-price">{{data.min_price_tip}}</div>
        <div v-if="data.delivery_type" class="item-meituan-flag">美团专送</div>
      </div>
      <div class="item-others">
        <div :key="index" class="other-info" v-for="(item,index) of  data.discounts2">
          <img :src="item.icon_url" class="other-tag"/>
          <div class="other-content">{{item.info}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import  StarScore from "@/components/common/StarScore"
  export default {
    name: 'ListItem',
    computed: {
    },
    components:{
      StarScore
    },
    props:['data'],
    methods:{
      detailbook(){
        this.$router.push({path:'/detailbook',query:{id:100001}})
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'

  .r-item-content {
    display: flex;
    padding-top: (0.3rem);
    padding-bottom: (0.3rem);
    margin-left: (0.2rem);
    margin-right: (0.2rem);
    color: #656565;
    position relative;
    &:after {
      background-color: #e4e4e4;
    }
    .item-img {
      width: (1.82rem);
      height: (1.3rem);
      border: 1px solid #e4e4e4;
    }
    .item-info-content {
      flex: 1;
      margin-left: (.14rem);
      overflow: hidden;
    }
    .brand {
      position: absolute;
      left: (0.01rem);
      top: (.32rem);
      font-size: (12px);
      padding: (.04rem);
      color: #fff;
    }
    .brand-pin {
      background-color: #ffa627;
    }
    .brand-xin {
      background-color: #21c56c;
    }
    .item-title {
      margin-top: (0.06rem);
      font-size: (16px);
      font-weight: 500;
      color: #333;
    }
    .item-desc {
      margin-top: (0.26rem);
      font-size: (12px);
    }

    .item-score {
      float: left;
    }
    .item-count {
      float: left;
      margin-left: (0.1rem);
    }
    .item-time {
      float: right;
    }
    .item-distance {
      float: right;
    }
    .item-price {
      margin-top: (0.2rem);
      font-size: (12px);
      height: (0.48rem);
    }
    .item-meituan-flag {
      float: right;
      background-color: #ffd161;
      color: #000;
      padding: (0.06rem);
      border-radius: (0.06rem);
    }
    .other-info {
      color: #898989;
      margin-top: (0.14rem);
      font-size: (12px);
      display: flex;
    }
    .other-tag {
      width: (0.28rem);
      height: (0.28rem);
    }
    .other-content {
      vertical-align: middle;
      margin-left: (0.06rem);
      height: (0.28rem);
      width: (460rem);
    }
    .item-pre-price {
      float: left;
    }

  }

</style>
